import './index.less';
import { Carousel } from 'antd';
export default function MidTop() {
  const namespace = 'mid-top';
  const contentStyle = {
    margin: 0,
    height: '160px',
    color: '#fff',
    background: '',
  };
  const data = [{}];
  return (
    <div className={`${namespace}`}>
      <div className={`${namespace}-left`}>最新预警</div>
      <div className={`${namespace}-right`}>
        <Carousel dotPosition="right">
          <div>
            <div className="danger" style={contentStyle}>
              <div className="high-danger">
                <div className="high-danger-top">
                  <span className="name">熊乐平</span>
                  <span className="danger">
                    <img
                      className="danger-icon"
                      src={require('../../../../assets/error-fill.png')}
                    />
                    高危-紧急处置
                  </span>
                </div>
                <div className="high-danger-bottom">
                  <div className="area">
                    <img
                      src={require('../../../../assets/location-fill@2x.png')}
                    />
                    嘉兴市南湖区商务大道
                  </div>
                  <div className="date">
                    <img
                      src={require('../../../../assets/time-circle-fill@2x.png')}
                    />
                    2022-12-26 22:35
                  </div>
                  <div className="thing">
                    <img src={require('../../../../assets/编组 9@2x.png')} />
                    扬言杀人
                  </div>
                </div>
              </div>
              <div className="mid-danger">
                <div className="mid-danger-top">
                  <span className="name">熊乐平</span>
                  <span className="danger">
                    <img
                      className="danger-icon"
                      src={require('../../../../assets/error-fill(1).png')}
                    />
                    中危-关注研判
                  </span>
                </div>
                <div className="mid-danger-bottom">
                  <div className="area">
                    <img
                      src={require('../../../../assets/location-fill@2x.png')}
                    />
                    嘉兴市南湖区商务大道
                  </div>
                  <div className="date">
                    <img
                      src={require('../../../../assets/time-circle-fill@2x.png')}
                    />
                    2022-12-26 22:35
                  </div>
                  <div className="thing">
                    <img src={require('../../../../assets/编组 9@2x.png')} />
                    扬言杀人
                  </div>
                </div>
              </div>
              <div className="low-danger">
                <div className="low-danger-top">
                  <span className="name">熊乐平</span>
                  <span className="danger">
                    <img
                      className="danger-icon"
                      src={require('../../../../assets/error-fill(2).png')}
                    />
                    低危-持续跟踪
                  </span>
                </div>
                <div className="low-danger-bottom">
                  <div className="area">
                    <img
                      src={require('../../../../assets/location-fill@2x.png')}
                    />
                    嘉兴市南湖区商务大道
                  </div>
                  <div className="date">
                    <img
                      src={require('../../../../assets/time-circle-fill@2x.png')}
                    />
                    2022-12-26 22:35
                  </div>
                  <div className="thing">
                    <img src={require('../../../../assets/编组 9@2x.png')} />
                    扬言杀人
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div style={contentStyle}>2</div>
          </div>
          <div>
            <h3 style={contentStyle}>3</h3>
          </div>
        </Carousel>
      </div>
    </div>
  );
}
